#sidebar {
  float: left;
  width: 150px;
  font-size: 14px;
  .sidebar_wrapper {
    width: 100%;
    border: 1px solid #e0e0e0;
    .title {
      padding: 25px;
      height: 10px;
      line-height: 20px;
      color: #666;
      text-align: center;
      cursor: pointer;
      background-color: rgb(220,220,220);
      border-bottom: 1px solid #e0e0e0;
      .label {
        width: 80px;
        float: left;
        display: inline-block;
      }
      .arrow {
        float: right;
        display: inline-block;
        background: url('./arrow1.png') no-repeat;
        width: 16px;
        height: 16px;

      }
    }
    .title.active {
      .arrow {
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }
    ul {
      display: none;
      li {
        height: 60px;
        text-align: center;
        cursor: pointer;
        background-color: rgb(237,237,238);
        a {
          line-height: 20px;
          padding: 20px;
          display: block;
          color: #669;
        }
        border-bottom: 1px solid rgb(244,244,244);
        &:hover {
          background-color: rgb(153,152,206);
          a {
            color: #FFF;
          }
        }
      }
      li.active {
        background-color: rgb(153,152,206);
        a {
          color: #FFF;
        }
      }
    }
    ul.active {
      display: block;
    }
  }
}